<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>搜索建议示例</title>-->
<!--    <style>-->
<!--        body {-->
<!--            font-family: Arial, sans-serif;-->
<!--            padding: 20px;-->
<!--        }-->

<!--        #searchContainer {-->
<!--            position: relative;-->
<!--            width: 300px;-->
<!--        }-->

<!--        input[type="text"] {-->
<!--            width: 100%;-->
<!--            padding: 10px;-->
<!--            border-radius: 5px 0 0 5px;-->
<!--            border: 1px solid #ccc;-->
<!--            border-right: none;-->
<!--        }-->

<!--        #searchOnBaidu {-->
<!--            padding: 10px;-->
<!--            border-radius: 0 5px 5px 0;-->
<!--            border: 1px solid #ccc;-->
<!--            background-color: #f1f1f1;-->
<!--            cursor: pointer;-->
<!--        }-->

<!--        #suggestions {-->
<!--            position: absolute;-->
<!--            top: 100%;-->
<!--            left: 0;-->
<!--            right: 0;-->
<!--            border: 1px solid #ccc;-->
<!--            border-top: none;-->
<!--            border-radius: 0 0 5px 5px;-->
<!--            background-color: #fff;-->
<!--            z-index: 1000;-->
<!--        }-->

<!--        .suggestion-item {-->
<!--            padding: 10px;-->
<!--            border-bottom: 1px solid #eee;-->
<!--            cursor: pointer;-->
<!--        }-->

<!--        .suggestion-item:last-child {-->
<!--            border-bottom: none;-->
<!--        }-->

<!--        .suggestion-item:hover {-->
<!--            background-color: #f9f9f9;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->

<!--<div id="searchContainer">-->
<!--    <input type="text" id="searchBox" placeholder="请输入搜索内容..." autocomplete="off">-->
<!--    <button id="searchOnBaidu">搜索</button>-->
<!--    <div id="suggestions"></div>-->
<!--</div>-->

<!--<script>-->
<!--    let timeout = null; // 用于防抖的变量-->

<!--    document.getElementById('searchBox').addEventListener('input', function () {-->
<!--        clearTimeout(timeout); // 清除之前的计时，实现防抖-->
<!--        const searchTerm = this.value;-->

<!--        if (searchTerm.length < 1) {-->
<!--            document.getElementById('suggestions').innerHTML = '';-->
<!--            return;-->
<!--        }-->

<!--        timeout = setTimeout(() => { // 延迟执行，防抖处理-->
<!--            // 获取存储在 sessionStorage 的用户 ID-->
<!--            const userId = sessionStorage.getItem('userId');-->

<!--            // 显示加载状态-->
<!--            const suggestionsElement = document.getElementById('suggestions');-->
<!--            suggestionsElement.innerHTML = '<div class="suggestion-item">正在加载...</div>';-->

<!--            fetch(`http://localhost:8083/api/search/related?searchTerm=${encodeURIComponent(searchTerm)}&userId=${userId}`)-->
<!--                .then(response => response.json())-->
<!--                .then(data => {-->
<!--                    suggestionsElement.innerHTML = '';-->
<!--                    if (data.length) {-->
<!--                        data.forEach(term => {-->
<!--                            const suggestionItem = document.createElement('div');-->
<!--                            suggestionItem.classList.add('suggestion-item');-->
<!--                            suggestionItem.textContent = term;-->
<!--                            suggestionItem.addEventListener('click', function() {-->
<!--                                document.getElementById('searchBox').value = term;-->
<!--                                document.getElementById('suggestions').innerHTML = ''; // 清空建议-->
<!--                            });-->
<!--                            suggestionsElement.appendChild(suggestionItem);-->
<!--                        });-->
<!--                    } else {-->
<!--                        suggestionsElement.innerHTML = '<div class="suggestion-item">没有找到相关建议</div>';-->
<!--                    }-->
<!--                })-->
<!--                .catch(error => {-->
<!--                    console.error('Error fetching search suggestions:', error);-->
<!--                    suggestionsElement.innerHTML = '<div class="suggestion-item">加载建议时出错</div>';-->
<!--                });-->
<!--        }, 500); // 设置500毫秒的延迟-->
<!--    });-->

<!--    document.getElementById('searchOnBaidu').addEventListener('click', function() {-->
<!--        const searchTerm = document.getElementById('searchBox').value;-->
<!--        if (searchTerm) {-->
<!--            window.open(`https://www.baidu.com/s?wd=${encodeURIComponent(searchTerm)}`, '_blank');-->
<!--        }-->
<!--    });-->


<!--</script>-->


<!--</body>-->
<!--</html>-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索建议与推荐系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }
        #mainContainer {
            display: flex;
            justify-content: start;
            align-items: flex-start;
            max-width: 600px;
        }
        #searchContainer {
            position: relative;
            width: 300px;
        }
        input[type="text"] {
            width: 100%;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
        #searchOnBaidu {
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
            cursor: pointer;
            margin-top: 5px;
        }
        #suggestions, #recommendationsList {
            list-style: none;
            padding: 0;
            margin-top: 5px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 100%;
        }
        .suggestion-item, #recommendationsList li {
            padding: 10px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
        }
        .suggestion-item:last-child, #recommendationsList li:last-child {
            border-bottom: none;
        }
        .suggestion-item:hover, #recommendationsList li:hover {
            background-color: #f9f9f9;
        }
        #recommendationsContainer {
            width: 300px;
            margin-left: 20px;
        }
        h2 {
            margin-top: 0;
        }
    </style>
</head>
<body>
<div id="mainContainer">
    <div id="searchContainer">
        <input type="text" id="searchBox" placeholder="请输入搜索内容..." autocomplete="off">
        <button id="searchOnBaidu">搜索</button>
        <div id="suggestions"></div>
    </div>

    <div id="recommendationsContainer">
        <h2>猜你喜欢：</h2>
        <ul id="recommendationsList">
            <!-- 推荐内容将动态添加到这里 -->
        </ul>
    </div>
</div>

<script>
    let timeout = null; // 用于防抖的变量
    let userId = sessionStorage.getItem('userId'); // 假设用户ID已存储在sessionStorage中

    document.getElementById('searchBox').addEventListener('input', function () {
        clearTimeout(timeout); // 清除之前的计时，实现防抖
        const searchTerm = this.value;

        if (searchTerm.length < 1) {
            document.getElementById('suggestions').innerHTML = '';
            return;
        }

        timeout = setTimeout(() => { // 延迟执行，防抖处理
            const suggestionsElement = document.getElementById('suggestions');
            suggestionsElement.innerHTML = '<div class="suggestion-item">正在加载...</div>';

            fetch(`http://localhost:8083/api/search/related?searchTerm=${encodeURIComponent(searchTerm)}&userId=${userId}`)
                .then(response => response.json())
                .then(data => {
                    suggestionsElement.innerHTML = '';
                    if (data.length) {
                        data.forEach(term => {
                            const suggestionItem = document.createElement('div');
                            suggestionItem.classList.add('suggestion-item');
                            suggestionItem.textContent = term;
                            suggestionItem.addEventListener('click', function() {
                                document.getElementById('searchBox').value = term;
                                suggestionsElement.innerHTML = ''; // 清空建议
                            });
                            suggestionsElement.appendChild(suggestionItem);
                        });
                    } else {
                        suggestionsElement.innerHTML = '<div class="suggestion-item">没有找到相关建议</div>';
                    }
                })
                .catch(error => {
                    console.error('Error fetching search suggestions:', error);
                    suggestionsElement.innerHTML = '<div class="suggestion-item">加载建议时出错</div>';
                });
        }, 500); // 设置500毫秒的延迟
    });

    document.getElementById('searchOnBaidu').addEventListener('click', function() {
        const searchTerm = document.getElementById('searchBox').value;
        if (searchTerm) {
            window.open(`https://www.baidu.com/s?wd=${encodeURIComponent(searchTerm)}`, '_blank');
        }
    });

    // 你可以选择在页面加载时或根据其他事件加载推荐
    function loadRecommendations() {
        const userId = sessionStorage.getItem('userId'); // 确保这里的userId被正确获取
        console.log("UserID from sessionStorage:", userId); // 调试输出UserID

        const recommendationsList = document.getElementById('recommendationsList');
        recommendationsList.innerHTML = ''; // 清空当前的推荐列表

        // 确保URL正确，并且查询参数包含正确的userId
        fetch(`http://localhost:8086/recommendations?userId=${userId}`)
            .then(response => {
                console.log("Response received"); // 调试输出
                return response.json();
            })
            .then(data => {
                console.log("Data parsed:", data); // 调试输出返回的数据
                if (data.length) {
                    data.forEach(item => {
                        const listItem = document.createElement('li');
                        listItem.textContent = item; // 假设返回的item是字符串
                        listItem.addEventListener('click', function() {
                            document.getElementById('searchBox').value = item; // 点击推荐项填入搜索框
                        });
                        recommendationsList.appendChild(listItem);
                    });
                } else {
                    recommendationsList.innerHTML = '<li>没有找到相关推荐</li>';
                }
            })
            .catch(error => {
                console.error('Error fetching recommendations:', error);
                recommendationsList.innerHTML = '<li>加载推荐时出错</li>';
            });
    }

    // 可以在页面加载完成后立即调用，或在合适的事件触发时调用
    document.addEventListener('DOMContentLoaded', loadRecommendations);


    loadRecommendations(); // 在页面加载时调用
</script>

</body>
</html>

